<template>
  <div class="reportContainers">
    <div v-if="masAnalysisStatus">
      <div class="reportContent" id="pdfDom">
        <div class="reportContent_title">
          面部皮肤健康检测报告
        </div>
        <div class="reportContent_content">
          <div class="reportContent_content_lineTitle" v-if="customer && customer.customer">
            客户信息
          </div>
          <div class="reportContent_contentContainers" v-if="customer && customer.customer">
            <div class="reportContent_content_item">
              <span>姓名：</span>
              <span>{{ customer.customer.name.indexOf('皮肤检测') > -1 ? '不详' : customer.customer.name
                }}</span>
            </div>
            <div class="reportContent_content_item">
              <span>性别：</span>
              <span>{{ customer.customer.phone != '15200000000' ? customer.customer.sex : '不详' }}</span>
            </div>
            <div class="reportContent_content_item">
              <span>检测日期：</span>
              <span>{{ getDate(customer.customer.MLastCheckTime) }}</span>
            </div>
            <div class="reportContent_content_item">
              <span>出生日期：</span>
              <span>{{ customer.customer.phone != '15200000000' ? customer.customer.birth : '不详' }}</span>
            </div>
            <div class="reportContent_content_item">
              <span>联系电话：</span>
              <span>{{
      (customer.customer.phone && customer.customer.phone != '15200000000') ?
        customer.customer.phone
        : '不详'
    }}</span>
            </div>
          </div>


          <div class="pageItem">
            <div class="reportContent_content_lineTitle" v-if="customer && customer.customer">
              综合报告
            </div>
            <div class="reportContent_contentContainers" v-if="customer && customer.customer">
              <div class="reportContent_content_item">
                <span>综合评分：</span>
                <span :style="{ color: currentColor }" style="font-weight:700;">{{ perRate }}</span>
              </div>
              <div class="reportContent_content_item">
                <span>好评度：</span>
                <span :style="{ color: currentColor }" style="font-weight:700;">{{ currentStatus
                  }}</span>
              </div>
            </div>
            <div class="reportContent_contentContainers" v-if="customer && customer.customer">

              <div class="reportContent_content_item ">
                <span>实际年龄：</span>
                <span>{{ calculateAge(customer.customer.birth) }}岁</span>
              </div>
              <div class="reportContent_content_item ">
                <span>综合肤龄：</span>
                <span>{{ getSkinAge(customer.checkInfo.skinAge, calculateAge(customer.customer.birth))
                  }}岁
                  <span
                    v-if="getSkinAge(customer.checkInfo.skinAge, calculateAge(customer.customer.birth)) != calculateAge(customer.customer.birth)">
                    <span v-if="calculateAge(customer.customer.birth) < customer.checkInfo.skinAge"
                      style="color:rgb(210,48,34);font-weight:bold">↑</span>
                    <span v-if="calculateAge(customer.customer.birth) > customer.checkInfo.skinAge"
                      style="color:rgb(94,193,59);font-weight:bold">↓</span>
                  </span>



                </span>
              </div>

            </div>
            <div class="reportContent_content_taotalContainers" v-if="perRate">

              <div class="reportContent_content_taotalContainers_left">
                <div class="circleBox">
                  <el-progress :show-text="false" :width="device == 'mobile' ? 80 : 120"
                    :stroke-width="device == 'mobile' ? 6 : 10" type="circle" :color="currentColor"
                    :percentage="perRate">
                  </el-progress>
                  <div class="circleCenter">
                    <div>
                      <div class="circleCenter_info" :style="{ color: currentColor }">
                        {{ perRate }}%
                      </div>
                      <div class="circleCenter_text" :style="{ color: currentColor }">
                        {{ currentStatus }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="rgbContainers">
                  <div class="rgbContainers_item" v-for="(item, index) in statusArr" :key="index">
                    <div class="rgbContainers_item_label" :style="{ background: item.color }">

                    </div>
                    <div class="rgbContainers_item_text">
                      {{ item.name }}
                    </div>
                    <div class="rgbContainers_item_status">
                      {{ item.status }}
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="isSysPhotoMasi">
                <div class="reportContent_content_lineTitle">
                  黄褐斑分析 <span
                    style="font-weight:500;color:red;font-size:10px;">(注：黄褐斑AI分析仅供参考，不作为治疗依据，具体以医生诊断为准!)</span>
                </div>
                <div class="reportContent_content_taotalContainers">
                  <div class="reportContent_content_taotalContainers_left">
                    <div class="circleBox">
                      <el-progress :show-text="false" :width="device == 'mobile' ? 80 : 120"
                        :stroke-width="device == 'mobile' ? 6 : 10" type="circle" color="#9B92E3"
                        :percentage="true ? 100 : progressPen">
                      </el-progress>
                      <div class="circleCenter">
                        <div>
                          <div class="circleCenter_info active" style="color:#ed8676">
                            {{ totalScore > 0 ? '有黄褐斑' : '无黄褐斑'
                            }}
                          </div>
                          <div class="circleCenter_text" style="color: #9B92E3" v-if="false">
                            <div class='progress-info2' v-if="totalScore > 16">严重</div>
                            <div class='progress-info2' v-else-if="totalScore > 8">中度</div>
                            <div class='progress-info2' v-else-if="totalScore > 0">轻微</div>
                            <div class='progress-info2' v-else>无</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="rules-containers" v-if="false">
                      <rules :totalScore="totalScore"></rules>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pageItem">
            <div class="reportContent_content_lineTitle">
              柱状图表
            </div>
            <div class="reportContent_content_taotalContainers_right">

              <div class="reportContent_content_taotalContainers_right_bg">
                <div v-for="(item, index) in lineArr" :key="index" class="lineHcontainer">
                  <div class="lineHcontainer_name">
                    {{ item.name }}
                  </div>
                  <div class="lineH">

                  </div>
                </div>
              </div>
              <div class="reportContent_content_taotalContainers_right_containers">
                <div class="reportContent_content_taotalContainers_right_containers_item"
                  v-for="(item, index) in HistogramArr" :key="item.id">
                  <div class="reportContent_content_taotalContainers_right_containers_item_name">
                    {{ item.name }}
                  </div>
                  <el-progress :percentage="item.value" :text-inside="true" :stroke-width="device == 'mobile' ? 14 : 20"
                    :color="customColors"
                    class="reportContent_content_taotalContainers_right_containers_item_progress"></el-progress>
                </div>
              </div>
            </div>

          </div>


          <div class="pageItem" v-if="isSysPhotoMasi">
            <div class="reportContent_content_lineTitle">
              黄褐斑分布区域 <span class="reportContent_content_date">日期：{{ getDate(sysPhotoMasi.createTime)
                }}</span>
            </div>
            <!--  -->
            <MsaPattern :imgListArr="masAnalysisArr" :isShowScore="false"></MsaPattern>
          </div>

          <div v-for="(item, index) in analysisArr" :key="index"
            v-if="item && item.checkInfo && item.checkInfo.analysisIndexs" class="analysisContainers pageItem">
            <div class="reportContent_content_lineTitle">
              {{ item.checkInfo.analysisArea == 0 ? '正脸' : item.checkInfo.analysisArea == 1 ? '左脸' : '右脸'
              }}报告
              <span class="reportContent_content_date">日期：{{ getDate(item.checkInfo.time) }}</span>
            </div>
            <div class="reportContent_content_imgContainers pageItem">
              <!-- data_result_pores -->
              <div class="reportContent_content_imgcontent">
                <el-image class="reportContent_content_imgcontent_img" :src="item.checkInfo.data_result_pores"
                  fit="container"></el-image>
                <div class="reportContent_content_imgcontent_name text_overflow">
                  RGB 毛孔
                </div>
              </div>
              <!-- data_result_rgbspots -->
              <div class="reportContent_content_imgcontent">
                <el-image class="reportContent_content_imgcontent_img" :src="item.checkInfo.data_result_rgbspots"
                  fit="container"></el-image>
                <div class="reportContent_content_imgcontent_name text_overflow">
                  RGB 色斑
                </div>
              </div>
              <!-- data_result_rgbtexture -->
              <div class="reportContent_content_imgcontent">
                <el-image class="reportContent_content_imgcontent_img" :src="item.checkInfo.data_result_rgbtexture"
                  fit="container"></el-image>
                <div class="reportContent_content_imgcontent_name text_overflow">
                  RGB 纹理
                </div>
              </div>
              <!-- data_result_rgbrough-->
              <div class="reportContent_content_imgcontent">
                <el-image class="reportContent_content_imgcontent_img" :src="item.checkInfo.data_result_rgbrough"
                  fit="container"></el-image>
                <div class="reportContent_content_imgcontent_name text_overflow">
                  PL 粗糙度
                </div>
              </div>
              <!-- data_result_rgbrough-->
              <div class="reportContent_content_imgcontent">
                <el-image class="reportContent_content_imgcontent_img" :src="item.checkInfo.data_result_uvacne"
                  fit="container"></el-image>
                <div class="reportContent_content_imgcontent_name text_overflow">
                  紫质
                </div>
              </div>
            </div>
            <div class="reportContent_content_imgContainers pageItem">
              <!--data_result_uvspots -->
              <div class="reportContent_content_imgcontent">
                <el-image class="reportContent_content_imgcontent_img" :src="item.checkInfo.data_result_uvspots"
                  fit="container"></el-image>
                <div class="reportContent_content_imgcontent_name text_overflow">
                  UV 色素
                </div>
              </div>
              <!-- data_result_uvrough -->
              <div class="reportContent_content_imgcontent">
                <el-image class="reportContent_content_imgcontent_img" :src="item.checkInfo.data_result_uvrough"
                  fit="container"></el-image>
                <div class="reportContent_content_imgcontent_name text_overflow">
                  UV 水润度
                </div>
              </div>
              <!-- data_result_red -->
              <div class="reportContent_content_imgcontent">
                <el-image class="reportContent_content_imgcontent_img" :src="item.checkInfo.data_result_red"
                  fit="container"></el-image>
                <div class="reportContent_content_imgcontent_name text_overflow">
                  肤色均匀度
                </div>
              </div>
              <!-- data_result_brown-->
              <div class="reportContent_content_imgcontent">
                <el-image class="reportContent_content_imgcontent_img" :src="item.checkInfo.data_result_brown"
                  fit="container"></el-image>
                <div class="reportContent_content_imgcontent_name text_overflow">
                  棕色区
                </div>
              </div>
              <!-- data_result_purple-->
              <div class="reportContent_content_imgcontent">
                <el-image class="reportContent_content_imgcontent_img" :src="item.checkInfo.data_result_purple"
                  fit="container"></el-image>
                <div class="reportContent_content_imgcontent_name text_overflow">
                  紫外线
                </div>
              </div>
            </div>
          </div>
          <div class="pageItem">
            <div class="reportContent_content_lineTitle" v-if="customer && customer.checkInfo">
              护肤建议
              <span id="span_btn" v-if="false">
                <el-button type="primary" size="mini" icon="el-icon-edit" v-if="!isEditStatus"
                class="reportContent_content_lineTitle_IconEdit" @click="changeEdit">修改建议</el-button>
                <el-button type="primary" size="mini" icon="el-icon-folder-checked" v-if="isEditStatus"
                class="reportContent_content_lineTitle_IconEdit red" @click="changeEdit">保存建议</el-button>
              </span>
            
            </div>
            <div class="reportContent_contentContainers active" v-if="customer && customer.checkInfo">
              <div class="reportContent_content_item " :class="isEditStatus?'editItem':''">
                <span style="font-weight:700">描述：</span>
                <div class="reportContent_content_inputDiv" v-if="isEditStatus">
                  <el-input type="textarea" autosize placeholder="请输入描述" v-model="customer.checkInfo.comprehensive_suggest_summary">
                  </el-input>
                </div>
               
                <span v-else>{{ customer.checkInfo.comprehensive_suggest_summary }}</span>
              </div>
              <div class="reportContent_content_item " :class="isEditStatus?'editItem':''">
                <span style="font-weight:700">原因：</span>
                <div class="reportContent_content_inputDiv" v-if="isEditStatus">
                  <el-input type="textarea" autosize placeholder="请输入原因" v-model="customer.checkInfo.comprehensive_suggest_reason">
                  </el-input>
                </div>
                <span v-else>{{ customer.checkInfo.comprehensive_suggest_reason }}</span>
              </div>
              <div class="reportContent_content_item" :class="isEditStatus?'editItem':''">
                <span style="font-weight:700">建议：</span>
                <div class="reportContent_content_inputDiv" v-if="isEditStatus">
                  <el-input type="textarea" autosize placeholder="请输入建议" v-model="customer.checkInfo.comprehensive_suggest">
                  </el-input>
                </div>
                <span v-else>{{ customer.checkInfo.comprehensive_suggest }}</span>
              </div>


            </div>
          </div>
          <div class="pageItem" v-if="sysDoctor && sysDoctor.doctorDiagnosis">
            <div class="reportContent_content_lineTitle">
              专家意见 <span class="reportContent_content_date">日期：{{ getDate(sysDoctor.createTime) }}</span>
            </div>
            <div class="reportContent_contentContainers active">
              <div class="reportContent_content_item">
                <span style="font-weight:700">诊断结果：</span>

                <span v-for="(item, index) in getDoctorDiagnosisList
      (sysDoctor.doctorDiagnosis)" :key="index" class="spanLabel"> {{ item }}</span>


              </div>
              <div class="reportContent_content_item">
                <span style="font-weight:700">处理意见：</span>

                <span v-for="(item, index) in getDoctorDiagnosisList
      (sysDoctor.doctorPlan)" :key="index" v-if="item" class="spanLabel1">{{ item }}
                </span>


              </div>
              <div class="reportContent_content_item">
                <span style="font-weight:700">诊断科室：</span>
                <span>{{ sysDoctor.hospitalName }}</span> <span v-if="sysDoctor.deptId != 100">{{ sysDoctor.deptName
                  }}</span>
              </div>
              <div class="reportContent_content_item">
                <span style="font-weight:700">诊断专家：</span>
                <span>{{ sysDoctor.nickName }}</span>
              </div>
            </div>

          </div>

        </div>
      </div>
      <!-- @click="getPdf('#pdfDom')" -->
      <div class="reportContent_btn" id="hide_btn">
        <el-button type="success" icon="el-icon-printer" size="small" @click="downloadPdf()"> 导 出
          pdf</el-button>
      </div>
    </div>
  </div>
</template>

<script>

const { body } = document
const WIDTH = 1080 // refer to Bootstrap's responsive design
import { photoAnalysisList, getphotoComprehensive } from "@/api/photoWorkstation/photoList";
import { pageToPDF } from '@/utils/htmlToPdf1'
import rules from '@/views/components/analysisPics/rules'
import MsaPattern from '@/views/components/analysisPics/MsaPattern'
import circleProgressbar from 'vue-circleprogressbar'
export default {
  name: "aiAnalysisReport",

  components: {
    circleProgressbar,
    rules,
    MsaPattern
  },
  props: {},
  data() {
    return {
      isEditStatus:false,
      isSysPhotoMasi: false,
      progressPen: 0,
      sysDoctor: {},// 诊断方案
      treatmentList: [],//治疗信息
      sysPhotoMasi: {},//黄褐斑分析结果
      totalScore: 0.0,
      device: '',
      htmlTitle: '面部皮肤健康检测报告',
      query: {},
      customer: {},
      analysisArr: [],
      masAnalysisArr: [],
      masAnalysisStatus: false,
      currentColor: '',
      currentStatus: '',
      customColors: [
        { color: 'rgb(210,48,34)', percentage: 29 },
        { color: 'rgb(238,116,50)', percentage: 49 },
        { color: 'rgb(226,221,36)', percentage: 69 },
        { color: 'rgb(34,69,204)', percentage: 84 },
        { color: 'rgb(94,193,59)', percentage: 100 }
      ],
      lineArr: [
        {
          id: 1,
          name: '一级护理'
        },
        {
          id: 2,
          name: '二级护理'
        },
        {
          id: 3,
          name: '三级护理'
        },
        {
          id: 4,
          name: '四级护理'
        },
        {
          id: 5,
          name: '五级护理'
        }
      ],
      nameArr: [
        'RGB毛孔', 'RGB色斑', 'RGB纹理', 'PL粗糙度', '紫质', 'UV色素', 'UV水润度', '肤色均匀度', '棕色区', '紫外线',
      ],
      totalRate: 0,
      perRate: 0,
      HistogramArr: [

      ],
      statusArr: [
        {
          color: 'rgb(210,48,34)',
          min: 1,
          max: 29.9,
          name: "1% - 29.9%",
          status: "严重"
        },
        {
          color: 'rgb(238,116,50)',
          min: 30,
          max: 49.9,
          name: "30% - 49.9%",
          status: "较差"
        },
        {
          color: 'rgb(226,221,36)',
          min: 50,
          max: 69.9,
          name: "50% - 69.9%",
          status: "一般"
        },
        {
          color: 'rgb(34,69,204)',
          min: 70,
          max: 84.9,
          name: "70% - 84.9%",
          status: "良好"
        },
        {
          color: 'rgb(94,193,59)',
          min: 85,
          max: 100,
          name: "85% - 100%",
          status: "完美"
        }
      ],
    }
  },
  computed: {

  },
  watch: {},

  beforeCreate() {
    console.log("执行")
  },
  beforeMount() {
    window.addEventListener('resize', this.$_resizeHandler)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.$_resizeHandler)
  },
  created() {

  },
  mounted() {
    let vm = this
    vm.query = vm.$route.query
    this.getReportInfos()
    this.$_resizeHandler()
    document.title = '面部皮肤健康检测报告'
  },
  methods: {
    changeEdit(){
       this.isEditStatus=!this.isEditStatus
    },
    getDoctorDiagnosisList(str) {
      if (str) {
        return str.split(';')
      }
    },
    getSkinAge(num1, num2) {
      if (num2 - num1 > 5) {
        return num2
      } else {
        return num1
      }
    },
    downloadPdf() {
      if(this.isEditStatus){
        this.$message.warning('请保存护肤建议，再导出报告~')
        return false
      }
      
      var tag1 = document.getElementById('span_btn');
      if(tag1){
        tag1.style.display = 'none';
      }
      const lableList = document.getElementsByClassName('pageItem');
      let title = this.htmlTitle
      var userAgent = navigator.userAgent; // 获取User Agent字符串
      if (/android/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
        this.$message.warning('安卓微信暂不支持pdf导出,请在浏览器打开~')
      } else {
        this.$modal.msgSuccess('pdf正在生成，请稍等~')
        pageToPDF(title, document.querySelector('#pdfDom'), lableList);
      }
    },
    btnPrint() {
      window.print()

    },
    //-----  下面是打印控制语句  ----------

    //打印之前隐藏不想打印出来的信息
    beforePrint() {
      var tag = document.getElementById('hide_btn');
      tag.style.display = 'none';

    },
    //打印之后将隐藏掉的信息再显示出来
    afterPrint() {
      var tag = document.getElementById('hide_btn');
      tag.style.display = '';
    },
    calculateAge(birthday) {
      let birth = birthday.replace(/-/g, '/')
      var today = new Date(); // 获取当前时间
      var birthdate = new Date(birth); // 将出生日期转换为Date对象

      var age = today.getFullYear() - birthdate.getFullYear(); // 计算年份之差

      if (today < birthdate || today.getMonth() < birthdate.getMonth()) {
        age--; // 如果还未过完全年则减1
      } else if (today.getMonth() === birthdate.getMonth() && today.getDay() < birthdate.getDay()) {
        age--; // 同样地，若已经过了该月的部分天数也要减1
      }

      return age;
    },
    getDate(time) {

      // 方法一：利用Date对象进行转换
      const date = new Date(time);
      const year = date.getFullYear();
      const month = date.getMonth() + 1; // 月份从0开始计算，需加1
      const day = date.getDate();
      const hours = date.getHours();
      const minutes = date.getMinutes();
      const seconds = date.getSeconds();
      // ${hours>9?hours:'0'+hours}:${minutes>9?minutes:'0'+minutes}:${seconds>9?seconds:'0'+day}
      let dayTime = `${year}-${month > 9 ? month : '0' + month}-${day > 9 ? day : '0' + day}`
      // console.log(`${dayTime}`);
      return dayTime
    },
    getStatus(value) {
      let that = this
      this.statusArr.forEach(item => {
        if (Number(value) >= item.min && Number(value) <= item.max) {
          that.currentColor = item.color
          that.currentStatus = item.status
        }
      })
    },
    $_isMobile() {
      const rect = body.getBoundingClientRect()
      return rect.width - 1 < 550
    },
    $_resizeHandler() {
      if (!document.hidden) {
        const isMobile = this.$_isMobile()
        //store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
        this.device = isMobile ? 'mobile' : 'desktop'
        console.log(this.device)
      }
    },
    getReportInfos() {
      let params = {}
      if (this.query.checkinCode) {
        params.checkinCode = this.query.checkinCode
      } else {
        params.pIndex = this.query.id
      }
      photoAnalysisList(params).then((res) => {
        let data = res.data
        let dataResult = []
        data.forEach(item => {
          let result = JSON.parse(item.result)
          if (result.checkInfo.analysisArea == 0) {//正脸
            this.customer = result
            if (result.fxdatas && result.fxdatas.length > 0)
              this.getRateArr(result.fxdatas)
          }
          console.log(result)
          dataResult.push(result)
        })
        this.analysisArr = dataResult
        console.log(data)
        this.getphotoComprehensiveEvent()
      })
    },
    getphotoComprehensiveEvent() {
      let params = {}
      if (this.query.checkinCode) {
        params.checkinCode = this.query.checkinCode
      } else {
        params.pIndex = this.query.id
      }
      getphotoComprehensive(params).then((res) => {
        if (res.code == 200) {
          let data = res.data
          data.aiAnalysis.forEach(it => {
            if (it.score && JSON.parse(it.score).left) {
              it.scoreAi = 0.3 * JSON.parse(it.score).left.area * JSON.parse(it.score).left.color
            }
            if (it.score && JSON.parse(it.score).brow) {
              it.scoreAi = 0.3 * JSON.parse(it.score).brow.area * JSON.parse(it.score).brow.color + 0.1 * JSON.parse(it.score).chin.area * JSON.parse(it.score).chin.color

            }
            if (it.score && JSON.parse(it.score).right) {
              it.scoreAi = 0.3 * JSON.parse(it.score).right.area * JSON.parse(it.score).right.color

            }
            it.points = this.formatPoints(it.points)
          })
          this.sysDoctor = data.sysDoctor
          this.treatmentList = data.treatmentList
          this.masAnalysisArr = data.aiAnalysis
          this.sysPhotoMasi = data.sysPhotoMasi
          if (this.sysPhotoMasi && this.sysPhotoMasi.score) {


            if (Number(this.sysPhotoMasi.score).toFixed(1) > 1.8 && Number(this.sysPhotoMasi.score).toFixed(1) < 16) {
              console.log("777")
              this.sysPhotoMasi.score = (Number(this.sysPhotoMasi.score) + 8).toFixed(1)
              this.totalScore = parseFloat(Number(this.sysPhotoMasi.score).toFixed(1))
              this.progressPen = parseFloat((this.totalScore / 24 * 100).toFixed(0))
            } else {
              console.log("888")
              this.totalScore = parseFloat(Number(this.sysPhotoMasi.score).toFixed(1))
              this.progressPen = parseFloat((this.totalScore / 24 * 100).toFixed(0))
            }

            this.isSysPhotoMasi = true
          } else {
            this.isSysPhotoMasi = false
          }
          this.masAnalysisStatus = true
        }

      })
    },
    //格式化画图组件点位格式数据
    formatPoints(data) {
      if (data != null) {
        let mData = []
        // console.log(JSON.parse(data))
        JSON.parse(data).forEach((item, index) => {
          let itPoint = []
          if (item && item.length > 0) {
            item.forEach((it, mindex) => {
              itPoint.push({
                x: it[0],
                y: it[1]
              })
              if (item.length - 1 === mindex) {
                //最后一个点连接到第一个点形成闭合
                itPoint.push({
                  x: item[0][0],
                  y: item[0][1]
                })
              }
            })
          }

          mData.push({
            points: itPoint,
            type: 'route'
          })
        })
        // console.log('mData', mData)
        return mData
      } else {
        return null
      }
    },
    getRateArr(dataArr) {
      this.HistogramArr = []
      dataArr.forEach((item, index) => {
        if (Number(item.kind) < 111) {
          let obj = {
            id: item.kind,
            name: this.nameArr[index],
            value: item.rate,
          }
          this.HistogramArr.push(obj)
          this.totalRate += item.rate
        }

      })
      this.perRate = this.totalRate / 10
      this.getStatus(this.perRate)

    },

  }
}
</script>
<style scoped lang="scss">
.spanLabel {
  color: rgb(238, 116, 50);
  margin-right: 20px;
  font-weight: 600;
}

.spanLabel1:last-child {
  margin-right: 0px;
}

.spanLabel:last-child {
  margin-right: 0px;
}

.spanLabel1 {
  color: rgb(110, 59, 193);
  margin-right: 20px;
  font-weight: 600;
}

.rules-containers {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.resultMsgCircle_process-containers {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;

}


.progress-info1 {
  text-align: center;
  color: #ed8676;

}

.progress-info2 {

  text-align: center;
  font-weight: bold;
  color: rgb(132, 141, 228);
}

.analysisContainers {
  margin-top: 10px;
}

.page-break-before {
  page-break-before: always;
}

.reportContent_content_taotalContainers {
  &_left {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &_right {
    margin-top: 0px;
    width: 100%;
    // background:#fff;
    border-radius: 8px;
    // box-shadow: 0px 2px 10px 0px rgba(56, 152, 255, 0.5) !important;
    position: relative;

    &_bg {
      padding: 3px 20px;
      padding-left: 100px;
      display: flex;
      justify-content: space-between;
      height: 340px;

      .lineHcontainer {
        height: 100%;

        .lineH {
          width: 1px;
          height: 90%;
          background: #ddd;
          margin-top: 8px;
        }
      }
    }

    &_containers {
      position: absolute;
      top: 35px;
      left: 0px;
      width: 100%;

      &_item {
        display: flex;
        align-items: center;
        margin-top: 10px;
       
        &_name {
          width: 100px;
          font-size: 14px;
          padding-left: 12px;
        }

        &_progress {
          width: calc(100% - 100px);
        }

        ::v-deep .el-progress-bar__outer {
          background-color: transparent;
          border-top-left-radius: 0px;
          border-bottom-left-radius: 0px;
        }

        ::v-deep .el-progress-bar__inner {
          border-top-left-radius: 0px;
          border-bottom-left-radius: 0px;
        }
      }
    }
  }
}

.rgbContainers {
  width: 250px;
  padding-left: 12px;

  &_item {
    display: flex;
    align-items: center;
    // justify-content: center;
    color: #666;
    font-size: 14px;
    margin-top: 5px;

    &_label {
      width: 15px;
      height: 15px;
      border-radius: 15px;
      margin-right: 10px;
    }

    &_label.label1 {
      background-color: rgb(210, 48, 34);
    }

    &_text {
      width: 100px;
    }
  }
}

.circleBox {
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  border-radius: 140px;
  margin-right: 100px;
  box-shadow: 0px 2px 10px 0px rgba(56, 152, 255, 0.5) !important;
}

.circleCenter {
  position: absolute;
  background: #fff;
  width: 80px;
  height: 80px;
  border-radius: 100px;
  top: 30px;
  left: 30px;
  display: flex;
  align-items: center;
  justify-content: center;

  &_info {
    font-size: 20px;
    font-weight: 700;
  }

  &_info.active {
    font-size: 16px;
  }

  &_text {
    font-size: 12px;
    font-weight: 400;
  }
}

.text_overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reportContent_btn {
  //     position: absolute;
  //    bottom: 15px;
  //     right: 15px;
  margin: 20px auto;
  justify-content: center;
  display: flex;
  align-items: center;
}

.reportContainers {
  max-width: 1000px;
  margin: 0 auto;
  height: 100vh;
  // box-sizing: border-box;
  padding: 10px;
  overflow-y: auto;
  position: relative;

  .reportContent {
    width: 100%;
    min-height: 100%;
    background: RGBA(229, 246, 255, 1);
    padding: 20px;
    box-sizing: border-box;

    &_title {
      text-align: center;

      font-weight: 800;
    }

    &_content {
      &_lineTitle {
        font-size: 16px;
        margin-top: 10px;
        margin-bottom: 5px;
        font-weight: 700;

        &_IconEdit {
          margin-left: 2px;
          padding: 3px 6px;
          font-size: 14px;
          background: transparent !important;
          color: #6e3bc1;
          border: none !important;
        }
        &_IconEdit.red{
          color: red!important;
        }
      }

      &_item {
        line-height: 30px;
        font-size: 16px;
        color: #333;
        margin-left:20px;
      }
      &_item.editItem{
        display: flex;
        margin-left:20px;
        width:calc(100% - 30px)!important;
      }
      &_inputDiv{
          width:calc(100% - 80px);
          ::v-deep .el-textarea__inner{
            background-color: transparent!important;
            color:#333;
            font-size:16px;
          }
        }
      &_imgContainers {
        display: flex;
        flex-wrap: wrap;
      }

      &_imgcontent {
        width: 20%;

        &_img {
          width: 100%;
          display: block;
        }

        &_name {
          text-align: center;
          font-size: 14px;
          line-height: 24px;

        }
      }
    }
  }

}

.reportContent_contentContainers.active {
  display: block;
  padding-bottom: 18px;

  .reportContent_content_item {
    font-size: 16px;
    line-height: 40px;
    width: 100%;
  }
}

.reportContent_contentContainers {
  display: flex;
  flex-wrap: wrap;

  .reportContent_content_item {
    width: 33.3%;
    font-size: 16px;
  }

  .reportContent_content_item.active {
    width: 50%;
  }
}

.reportContainers::-webkit-scrollbar {
  display: none;
}

@media screen and (min-width: 1200px) {
  .reportContent {
    width: 100%;
    min-height: 100%;
    //background:#eee;
    box-shadow: 0px 2px 10px 0px rgba(56, 152, 255, 0.5) !important;
    border-radius: 4px 4px 4px 4px;
    padding: 10px;

    &_title {
      text-align: center;
      font-size: 24px;
      font-weight: 800;
    }
  }

}

@media screen and (min-width: 993px) and (max-width:1199px) {
  .reportContent {
    padding: 10px;

    &_title {
      font-size: 20px;
    }
  }
}

@media screen and (min-width: 768px) and (max-width:992px) {
  .reportContent {
    padding: 10px;

    &_title {
      font-size: 18px;
    }
  }
}

@media screen and (min-width: 550px) and (max-width:767px) {
  .reportContent {
    padding: 10px;

    &_title {
      font-size: 16px;
    }
  }
}

@media screen and (max-width:550px) {
  .resultMsgCircle_process {
    width: 100px;
    height: 100px;
    position: relative;
  }

  .progress-content {
    .progress-info1 {
      font-size: 12px;
    }
  }

  .reportContainers {
    padding: 0px;

    .reportContent {
      padding: 10px;

      &_title {
        font-size: 14px;
      }


      &_content {
        &_lineTitle {
          font-size: 13px;
          margin-top: 4px;
          margin-bottom: 3px;
        }

        &_item {
          line-height: 20px;
          font-size: 12px;
          color: #333;
        }


        &_imgcontent {
          &_name {
            text-align: center;
            font-size: 12px;
            line-height: 20px;
            transform: scale(0.83333);

          }
        }
      }
    }
  }

  .reportContent_contentContainers.active {
    display: block;
    padding-bottom: 30px;

    .reportContent_content_item {
      font-size: 12px;
      line-height: 20px;
      width: 100%;
    }
  }

  .reportContent_contentContainers {

    .reportContent_content_item {
      font-size: 12px;
      line-height: 20px;
      width: 50%
    }
  }

  .circleBox {
    margin-right: 10px;
    width: 100px;
    height: 100px;
    border-radius: 100px;

  }


  .circleCenter {

    width: 60px;
    height: 60px;
    border-radius: 60px;
    top: 20px;
    left: 20px;

    &_info {
      font-size: 16px;
      font-weight: 700;
    }

    &_info.active {
      font-size: 14px;
    }

    &_text {
      font-size: 12px;
      font-weight: 400;
      transform: scale(0.83333);
    }
  }

  .rgbContainers {
    width: 220px;

    &_item {
      font-size: 12px;
      margin-top: 2px;

      &_label {
        width: 10px;
        height: 10px;
        border-radius: 10px;
        margin-right: 8px;
      }

    }
  }

  .reportContent_content_taotalContainers {
    &_right {
      &_bg {
        padding-right: 2px;
        padding-left: 70px;
        height: 215px;

        .lineHcontainer {
          &_name {
            font-size: 12px;
            transform: scale(0.83333);
          }
        }
      }

      &_containers {
        position: absolute;
        top: 20px;
        left: 0px;
        width: 100%;

        &_item {
          margin-top: 3px;

          &_name {
            width: 70px;
            font-size: 12px;
            padding-left: 6px;
          }

          &_progress {
            width: calc(100% - 70px);

            ::v-deep .el-progress-bar__inner {
              line-height: 13px;
            }

            ::v-deep .el-progress-bar__innerText {
              line-height: 13px;
            }
          }

        }
      }
    }
  }
}

@media screen and (max-width:390px) {
  .resultMsgCircle_process {
    width: 100px;
    height: 100px;
    position: relative;
  }

  .progress-content {
    .progress-info1 {
      font-size: 12px;

    }
  }

  .rgbContainers {
    width: 220px;

    &_item {
      font-size: 12px;
      margin-top: 2px;

      &_label {
        width: 10px;
        height: 10px;
        border-radius: 10px;
        margin-right: 8px;
      }

    }
  }

  .reportContent {
    padding: 10px;

    &_title {
      font-size: 14px;
    }
  }

}
</style>
